<!DOCTYPE html>
<html lang="en">
<head>
    <%= require('./common/head.htm')%>
</head>
<body>
    
    <%= require('./common/header.htm')%>
    <div id="Welcome">
        <div id="WelcomeContent">
            <div>
                Welcome to Mypetstore!
            </div>
        </div>
    </div>

    <!-- <script type="text/javascript" src="../js/ProductShow.js"></script> -->
<!--    <script type="text/javascript" th:src="@{${pageContext.request.contextPath}/js/ProductShow.js}"></script>-->

    <div id="Main">
        <div id="Sidebar">
            <div id="SidebarContent">
                <a href="./catalog-list.html?id=FISH&route=product"><img src="<%= require('../images/fish_icon.gif')%>" /></a>
                <br/> Saltwater, Freshwater <br/>
                <a href="./catalog-list.html?id=DOGS&route=product"><img src="<%= require('../images/dogs_icon.gif')%>" /></a>
                <br /> Various Breeds <br />
                <a href="./catalog-list.html?id=CATS&route=product"><img src="<%= require('../images/cats_icon.gif')%>" /></a>
                <br /> Various Breeds, Exotic Varieties <br />
                <a href="./catalog-list.html?id=REPTILES&route=product"><img src="<%= require('../images/reptiles_icon.gif')%>" /></a>
                <br /> Lizards, Turtles, Snakes <br />
                <a href="./catalog-list.html?id=BIRDS&route=product"><img src="<%= require('../images/birds_icon.gif')%>" /></a>
                <br /> Exotic Varieties
            </div>
        </div>

        <div id="MainImage">
            <div id="MainImageContent">
                <map name="estoremap">
                    <area alt="Birds" coords="72,2,280,250" href="./catalog-list.html?id=BIRDS&route=product" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                    <area alt="Fish" coords="2,180,72,250" href="./catalog-list.html?id=FISH&route=product" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                    <area alt="Dogs" coords="60,250,130,320" href="./catalog-list.html?id=DOGS&route=product" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                    <area alt="Reptiles" coords="140,270,210,340" href="./catalog-list.html?id=REPTILES&route=product" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                    <area alt="Cats" coords="225,240,295,310" href="./catalog-list.html?id=CATS&route=product" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                    <area alt="Birds" coords="280,180,350,250" href="./catalog-list.html?id=BIRDS&route=product" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
                </map>
                <img height="355" src="<%= require('../images/splash.gif')%>" align="middle" usemap="#estoremap" width="350" />
            </div>
        </div>

        <div id="inform" style="display: none"></div>

        <div id="Separator">&nbsp;</div>
        <%= require('./common/footer.htm')%>
    </div>
</body>
</html>